<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="ad">

</div>
<script>
    let ad = document.querySelector('#ad');
    // ad.addEventListener("click", function () {
    //     let that = this
    //     setTimeout(function () {
    //         that.style.background = 'pink'
    //     }, 2000)
    // })

    //采用箭头函数的写法更简洁,他的this是静态的,箭头函数内的this指向他声明时的外层作用域
    ad.addEventListener('click', function () {
        setTimeout(() => this.style.background = 'pink', 2000)
    })
    //箭头函数适合与this无关的回调,定时器,数组的方法等
    //箭头函数不适合与this有关的回调,时间回调,对象的方法等
</script>
</body>
</html>
